<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<#include "include/head.ftl"/>
    <style type="text/css">
        .menu-child {
            padding-left: 20% !important;
        }

        .logo {
            width: 45px;
            height: 64%;
            margin: 12px 8px auto;
            background-color: #8EDFBD;
            border-radius: 50%;
            line-height: 50px;
            float: left;
        }

        .logo > img {
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .layui-logo > span {
            float: left;
            font-family: Menlo, Monaco, Consolas;
            font-weight: bold;
            letter-spacing: 1.5px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layui-layout-admin">
    <!--头部-->
    <div class="layui-header">
        <div class="layui-logo" style="width: 40%;padding-left: 1%;">
            <div class="logo">
                <img onclick="jump2Index()" src="${ctx}/ftl/images/logo@2x.png" alt="">
            </div>
            <span onclick="jump2Index()"> MA平台 | 运营管理系统 </span>
        </div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="">
                    <img src="http://m.zhengjinfan.cn/images/0.jpg" class="layui-nav-img">${user.userName!}</a>
            </li>
            <li class="layui-nav-item">
                <a href="/admin/logout">退出</a>
            </li>
        </ul>
    </div>

    <!--左侧-->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="menuLeft" id="menu_left"></ul>
        </div>
    </div>

    <!--中间主体-->
    <div class="layui-body" id="container">
        <iframe id="body" name="body" src="${ctx}/admin/index" scrolling="auto" frameborder="0"
                style="width:100%;height:100%;"></iframe>
    </div>

    <!--底部-->
    <div class="layui-footer" style="height:30px;text-align: center; line-height: 30px;letter-spacing: 2px">
        微工匠版权所有&copy;copy
    </div>
</div>
<script>
    layui.use('element', function () {
        var element = layui.element;
        initMenu();
        //渲染菜单
        element.render('nav', 'menuLeft'); //也可以用： element.init();
        //监听菜单点击
        /*element.on('nav(menuLeft)', function (elem) {
            //!*使用DOM操作获取超链接的自定义data属性值*!/
            var options = eval('(' + elem.context.children[0].dataset.options + ')');
            var url = options.url;
            var url = options.id;
            var title = options.title;
            element.tabAdd('tabs', {
                title: title,
                content: '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>',
                id: '111'
            });
        });*/
        /*使用下面的方式需要引用jquery*/
        $('.layui-nav-child a').click(function () {
            var url = $(this).href;
            $('#body').src = url;

            // 如果想在右边出现 tab, 需要打开这里
            /*  var options = eval('(' + $(this).data('options') + ')');
              var title = $(this).text();
              element.tabAdd('tabs', {
                  title: title,
                  content: '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>'
              });*/
        });
    });

    // 初始化菜单
    function initMenu() {
        $.ajax({
            type: "GET",
            url: "/rbac/menu/user",
            dataType: "json",
            async: false,//同步加载
            success: function (result) {
                console.log(result);
                if (result.flag) {
                    buildMenu(result.data);
                } else {

                }
            }
        });
    }

    function jump2Index() {
        location.href = '${ctx}';
    }

    //生成菜单
    function buildMenu(data) {
        var str = "";
        $(data).each(function (i, val) {
            str += '<li class="layui-nav-item">' +
                    '<a href="javascript:;"><i class="layui-icon" style="margin-right: 4px;font-size: 16px">' + val.icon + '</i>' + val.name + '</a>';
            if (val.children != null && val.children != undefined && val.children.length > 0) {
                var submenu = buildSubMenu(val.children);
                str += submenu;
            }
            str += "</li>";
        });
        $("#menu_left").html(str);
    }

    //生成子菜单
    function buildSubMenu(data) {
        var str = "";
        $(data).each(function (i, val) {
            str += ' <dl class="layui-nav-child"> ' +
                    '     <dd lay-id="' + val.id + '">' +
                    '         <a href="' + val.link + '" class="menu-child" target="body">' + val.name + '</a>' +
                    '     </dd>' +
                    ' </dl>';
        });
        return str;
    }


    function logout() {
        $
    }
</script>
</body>
</html>
